const range = (start, end) => Array.from(Array(end + 1).keys()).slice(start);
const Mutation = {
    setBook: 'setBook',
    setRange: 'setRange',
    setSrc: 'setSrc',
    setRightSrc: 'setRightSrc',
};
const store = new Vuex.Store({
    state: {
        book: '',
        src: '',
        rightSrc: '',
        range: [],
        currentPage: 1,
        config: {
            '北师大版三年级数学下册:None': {
                cat: 'math-3',
                nameFn(s) {
                    return `${s}`.length > 0 ? `${this.cat}/${`${s}`.padStart(3, '0')}.jpg` : '';
                }
            },
            '人教版三年级语文下册:None': {
                cat: 'chinese-3',
                nameFn(s) {
                    return `${s}`.length > 0 ? `${this.cat}/image${s}.jpg` : '';
                }
            },
        },
    },
    mutations: {
        [Mutation.setBook](state, book) {
            state.book = book;
        },
        [Mutation.setRange](state, range) {
            state.range = range;
        },
        [Mutation.setSrc](state, src) {
            state.src = state.config[state.book].nameFn(src);
        },
        [Mutation.setRightSrc](state, src) {
            state.rightSrc = state.config[state.book].nameFn(src);
        }
    }
});


// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const BookContent = {
    computed: {
        src() {
            return this.$store.state.src
        },
        rightSrc() {
            return this.$store.state.rightSrc
        },
        total() {
            return this.$store.state.range.length
        }
    },
    methods: {
        onPageChange(page) {
            let src = '';
            let rightSrc = '';
            if (page === this.total) {
                src = this.$store.state.range[page - 2];
                rightSrc = this.$store.state.range[page - 1];
            } else {
                src = this.$store.state.range[page - 1];
                rightSrc = this.$store.state.range[page];
            }

            this.$store.commit(Mutation.setSrc, src);
            this.$store.commit(Mutation.setRightSrc, rightSrc);
        }
    },
    template: `
            <div class="grid-content bg-purple">
                <img :src="src" v-if="src" class="book-img"/>
                <img :src="rightSrc" v-if="rightSrc" class="book-img"/>
                <el-pagination 
                :small="true"
                background 
                layout="prev, pager, next" 
                v-show="total > 2"
                :total="total" 
                style="position: fixed;bottom: 5px;" 
                :page-size="1"
                @current-change="onPageChange"
                >  </el-pagination>
            </div>
`
};

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
    {path: '/book/:id', component: BookContent, name: 'book-content'}
];

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
});

const Main = {
    store,
    router,
    data() {
        return {
            data: [
                {
                    "rank": 0,
                    "title": "\u4eba\u6559\u7248\u4e09\u5e74\u7ea7\u8bed\u6587\u4e0b\u518c",
                    "id": "\u4eba\u6559\u7248\u4e09\u5e74\u7ea7\u8bed\u6587\u4e0b\u518c:None",
                    "children": [{
                        "rank": 1,
                        "title": "\u5c01\u9762",
                        "id": "\u5c01\u9762:0",
                        "children": [],
                        "start": "0",
                        "end": "0"
                    }, {
                        "rank": 1,
                        "title": "\u524d\u8a00",
                        "id": "\u524d\u8a00:1",
                        "children": [],
                        "start": "1",
                        "end": "2"
                    }, {
                        "rank": 1,
                        "title": "\u76ee\u5f55",
                        "id": "\u76ee\u5f55:3",
                        "children": [],
                        "start": "3",
                        "end": "4"
                    }, {
                        "rank": 1,
                        "title": "\u7b2c\u4e00\u5355\u5143",
                        "id": "\u7b2c\u4e00\u5355\u5143:5",
                        "children": [{
                            "rank": 2,
                            "title": "1 \u53e4\u8bd7\u4e09\u9996",
                            "id": "1 \u53e4\u8bd7\u4e09\u9996:6",
                            "children": [{
                                "rank": 3,
                                "title": "\u7edd\u53e5",
                                "id": "\u7edd\u53e5:6",
                                "children": [],
                                "start": "6",
                                "end": "6"
                            }, {
                                "rank": 3,
                                "title": "\u60e0\u5d07\u6625\u6c5f\u665a\u666f",
                                "id": "\u60e0\u5d07\u6625\u6c5f\u665a\u666f:6",
                                "children": [],
                                "start": "6",
                                "end": "6"
                            }, {
                                "rank": 3,
                                "title": "\u4e09\u8862\u9053\u4e2d",
                                "id": "\u4e09\u8862\u9053\u4e2d:7",
                                "children": [],
                                "start": "7",
                                "end": "7"
                            }],
                            "start": "6",
                            "end": "7"
                        }, {
                            "rank": 2,
                            "title": "2 \u71d5\u5b50",
                            "id": "2 \u71d5\u5b50:8",
                            "children": [],
                            "start": "8",
                            "end": "9"
                        }, {
                            "rank": 2,
                            "title": "3 \u8377\u82b1",
                            "id": "3 \u8377\u82b1:10",
                            "children": [],
                            "start": "10",
                            "end": "11"
                        }, {
                            "rank": 2,
                            "title": "4* \u6606\u866b\u5907\u5fd8\u5f55",
                            "id": "4* \u6606\u866b\u5907\u5fd8\u5f55:12",
                            "children": [],
                            "start": "12",
                            "end": "14"
                        }, {
                            "rank": 2,
                            "title": "\u53e3\u8bed\u4ea4\u9645\uff1a\u6625\u6e38\u53bb\u54ea\u513f\u73a9",
                            "id": "\u53e3\u8bed\u4ea4\u9645\uff1a\u6625\u6e38\u53bb\u54ea\u513f\u73a9:15",
                            "children": [],
                            "start": "15",
                            "end": "15"
                        }, {
                            "rank": 2,
                            "title": "\u4e60\u4f5c\uff1a\u6211\u7684\u690d\u7269\u670b\u53cb",
                            "id": "\u4e60\u4f5c\uff1a\u6211\u7684\u690d\u7269\u670b\u53cb:16",
                            "children": [],
                            "start": "16",
                            "end": "16"
                        }, {
                            "rank": 2,
                            "title": "\u8bed\u6587\u56ed\u5730",
                            "id": "\u8bed\u6587\u56ed\u5730:17",
                            "children": [],
                            "start": "17",
                            "end": "18"
                        }],
                        "start": "5",
                        "end": "5"
                    }, {
                        "rank": 1,
                        "title": "\u7b2c\u4e8c\u5355\u5143",
                        "id": "\u7b2c\u4e8c\u5355\u5143:19",
                        "children": [{
                            "rank": 2,
                            "title": "5 \u5b88\u682a\u5f85\u5154",
                            "id": "5 \u5b88\u682a\u5f85\u5154:20",
                            "children": [],
                            "start": "20",
                            "end": "21"
                        }, {
                            "rank": 2,
                            "title": "6 \u9676\u7f50\u548c\u94c1\u7f50",
                            "id": "6 \u9676\u7f50\u548c\u94c1\u7f50:22",
                            "children": [],
                            "start": "22",
                            "end": "24"
                        }, {
                            "rank": 2,
                            "title": "7 \u7f8e\u4e3d\u7684\u9e7f\u89d2",
                            "id": "7 \u7f8e\u4e3d\u7684\u9e7f\u89d2:25",
                            "children": [],
                            "start": "25",
                            "end": "26"
                        }, {
                            "rank": 2,
                            "title": "8* \u6c60\u5b50\u4e0e\u6cb3\u6d41",
                            "id": "8* \u6c60\u5b50\u4e0e\u6cb3\u6d41:27",
                            "children": [],
                            "start": "27",
                            "end": "30"
                        }, {
                            "rank": 2,
                            "title": "\u53e3\u8bed\u4ea4\u9645\uff1a\u8be5\u4e0d\u8be5\u5b9e\u884c\u73ed\u5e72\u90e8\u8f6e\u6d41\u5236",
                            "id": "\u53e3\u8bed\u4ea4\u9645\uff1a\u8be5\u4e0d\u8be5\u5b9e\u884c\u73ed\u5e72\u90e8\u8f6e\u6d41\u5236:31",
                            "children": [],
                            "start": "31",
                            "end": "31"
                        }, {
                            "rank": 2,
                            "title": "\u4e60\u4f5c\uff1a\u770b\u56fe\u753b\uff0c\u5199\u4e00\u5199",
                            "id": "\u4e60\u4f5c\uff1a\u770b\u56fe\u753b\uff0c\u5199\u4e00\u5199:32",
                            "children": [],
                            "start": "32",
                            "end": "32"
                        }, {
                            "rank": 2,
                            "title": "\u8bed\u6587\u56ed\u5730",
                            "id": "\u8bed\u6587\u56ed\u5730:33",
                            "children": [],
                            "start": "33",
                            "end": "34"
                        }, {
                            "rank": 2,
                            "title": "\u5feb\u4e50\u8bfb\u4e66\u5427",
                            "id": "\u5feb\u4e50\u8bfb\u4e66\u5427:35",
                            "children": [],
                            "start": "35",
                            "end": "36"
                        }],
                        "start": "19",
                        "end": "19"
                    }, {
                        "rank": 1,
                        "title": "\u7b2c\u4e09\u5355\u5143",
                        "id": "\u7b2c\u4e09\u5355\u5143:37",
                        "children": [{
                            "rank": 2,
                            "title": "9 \u53e4\u8bd7\u4e09\u9996",
                            "id": "9 \u53e4\u8bd7\u4e09\u9996:38",
                            "children": [{
                                "rank": 3,
                                "title": "\u5143\u65e5",
                                "id": "\u5143\u65e5:38",
                                "children": [],
                                "start": "38",
                                "end": "38"
                            }, {
                                "rank": 3,
                                "title": "\u6e05\u660e",
                                "id": "\u6e05\u660e:38",
                                "children": [],
                                "start": "38",
                                "end": "38"
                            }, {
                                "rank": 3,
                                "title": "\u4e5d\u6708\u4e5d\u65e5\u5fc6\u5c71\u4e1c\u5144\u5f1f",
                                "id": "\u4e5d\u6708\u4e5d\u65e5\u5fc6\u5c71\u4e1c\u5144\u5f1f:39",
                                "children": [],
                                "start": "39",
                                "end": "39"
                            }, {
                                "rank": 3,
                                "title": "\u6d3b\u52a8\u63d0\u793a",
                                "id": "\u6d3b\u52a8\u63d0\u793a:40",
                                "children": [{
                                    "rank": 4,
                                    "title": "",
                                    "id": ":None",
                                    "children": [],
                                    "start": null,
                                    "end": null
                                }],
                                "start": "40",
                                "end": "40"
                            }],
                            "start": "38",
                            "end": "40"
                        }, {
                            "rank": 2,
                            "title": "10 \u7eb8\u7684\u53d1\u660e",
                            "id": "10 \u7eb8\u7684\u53d1\u660e:41",
                            "children": [],
                            "start": "41",
                            "end": "43"
                        }, {
                            "rank": 2,
                            "title": "11 \u8d75\u5dde\u6865",
                            "id": "11 \u8d75\u5dde\u6865:44",
                            "children": [],
                            "start": "44",
                            "end": "45"
                        }, {
                            "rank": 2,
                            "title": "12* \u4e00\u5e45\u540d\u626c\u4e2d\u5916\u7684\u753b",
                            "id": "12* \u4e00\u5e45\u540d\u626c\u4e2d\u5916\u7684\u753b:46",
                            "children": [],
                            "start": "46",
                            "end": "47"
                        }, {
                            "rank": 2,
                            "title": "\u7efc\u5408\u6027\u5b66\u4e60\uff1a\u4e2d\u534e\u4f20\u7edf\u8282\u65e5",
                            "id": "\u7efc\u5408\u6027\u5b66\u4e60\uff1a\u4e2d\u534e\u4f20\u7edf\u8282\u65e5:48",
                            "children": [],
                            "start": "48",
                            "end": "48"
                        }, {
                            "rank": 2,
                            "title": "\u8bed\u6587\u56ed\u5730",
                            "id": "\u8bed\u6587\u56ed\u5730:49",
                            "children": [],
                            "start": "49",
                            "end": "50"
                        }],
                        "start": "37",
                        "end": "37"
                    }, {
                        "rank": 1,
                        "title": "\u7b2c\u56db\u5355\u5143",
                        "id": "\u7b2c\u56db\u5355\u5143:51",
                        "children": [{
                            "rank": 2,
                            "title": "13 \u82b1\u949f",
                            "id": "13 \u82b1\u949f:52",
                            "children": [],
                            "start": "52",
                            "end": "54"
                        }, {
                            "rank": 2,
                            "title": "14 \u871c\u8702",
                            "id": "14 \u871c\u8702:55",
                            "children": [],
                            "start": "55",
                            "end": "57"
                        }, {
                            "rank": 2,
                            "title": "15* \u5c0f\u867e",
                            "id": "15* \u5c0f\u867e:58",
                            "children": [],
                            "start": "58",
                            "end": "59"
                        }, {
                            "rank": 2,
                            "title": "\u4e60\u4f5c\uff1a\u6211\u505a\u4e86\u4e00\u9879\u5c0f\u5b9e\u9a8c",
                            "id": "\u4e60\u4f5c\uff1a\u6211\u505a\u4e86\u4e00\u9879\u5c0f\u5b9e\u9a8c:60",
                            "children": [],
                            "start": "60",
                            "end": "60"
                        }, {
                            "rank": 2,
                            "title": "\u8bed\u6587\u56ed\u5730",
                            "id": "\u8bed\u6587\u56ed\u5730:61",
                            "children": [],
                            "start": "61",
                            "end": "62"
                        }],
                        "start": "51",
                        "end": "51"
                    }, {
                        "rank": 1,
                        "title": "\u7b2c\u4e94\u5355\u5143",
                        "id": "\u7b2c\u4e94\u5355\u5143:63",
                        "children": [{
                            "rank": 2,
                            "title": "16 \u5c0f\u771f\u7684\u957f\u5934\u53d1",
                            "id": "16 \u5c0f\u771f\u7684\u957f\u5934\u53d1:64",
                            "children": [],
                            "start": "64",
                            "end": "66"
                        }, {
                            "rank": 2,
                            "title": "17 \u6211\u53d8\u6210\u4e86\u4e00\u68f5\u6811",
                            "id": "17 \u6211\u53d8\u6210\u4e86\u4e00\u68f5\u6811:67",
                            "children": [],
                            "start": "67",
                            "end": "70"
                        }, {
                            "rank": 2,
                            "title": "\u4e60\u4f5c\u4f8b\u6587",
                            "id": "\u4e60\u4f5c\u4f8b\u6587:71",
                            "children": [],
                            "start": "71",
                            "end": "73"
                        }, {
                            "rank": 2,
                            "title": "\u4e60\u4f5c\uff1a\u5947\u5999\u7684\u60f3\u8c61",
                            "id": "\u4e60\u4f5c\uff1a\u5947\u5999\u7684\u60f3\u8c61:74",
                            "children": [],
                            "start": "74",
                            "end": "74"
                        }],
                        "start": "63",
                        "end": "63"
                    }, {
                        "rank": 1,
                        "title": "\u7b2c\u516d\u5355\u5143",
                        "id": "\u7b2c\u516d\u5355\u5143:75",
                        "children": [{
                            "rank": 2,
                            "title": "18 \u7ae5\u5e74\u7684\u6c34\u58a8\u753b",
                            "id": "18 \u7ae5\u5e74\u7684\u6c34\u58a8\u753b:76",
                            "children": [],
                            "start": "76",
                            "end": "77"
                        }, {
                            "rank": 2,
                            "title": "19 \u4e00\u53ea\u7a9d\u56ca\u7684\u5927\u8001\u864e",
                            "id": "19 \u4e00\u53ea\u7a9d\u56ca\u7684\u5927\u8001\u864e:78",
                            "children": [],
                            "start": "78",
                            "end": "80"
                        }, {
                            "rank": 2,
                            "title": "20 \u80a5\u7682\u6ce1",
                            "id": "20 \u80a5\u7682\u6ce1:81",
                            "children": [],
                            "start": "81",
                            "end": "83"
                        }, {
                            "rank": 2,
                            "title": "21* \u6211\u4e0d\u80fd\u5931\u4fe1",
                            "id": "21* \u6211\u4e0d\u80fd\u5931\u4fe1:84",
                            "children": [],
                            "start": "84",
                            "end": "85"
                        }, {
                            "rank": 2,
                            "title": "\u4e60\u4f5c\uff1a\u8eab\u8fb9\u90a3\u4e9b\u6709\u7279\u70b9\u7684\u4eba",
                            "id": "\u4e60\u4f5c\uff1a\u8eab\u8fb9\u90a3\u4e9b\u6709\u7279\u70b9\u7684\u4eba:86",
                            "children": [],
                            "start": "86",
                            "end": "86"
                        }, {
                            "rank": 2,
                            "title": "\u8bed\u6587\u56ed\u5730",
                            "id": "\u8bed\u6587\u56ed\u5730:87",
                            "children": [],
                            "start": "87",
                            "end": "88"
                        }],
                        "start": "75",
                        "end": "75"
                    }, {
                        "rank": 1,
                        "title": "\u7b2c\u4e03\u5355\u5143",
                        "id": "\u7b2c\u4e03\u5355\u5143:89",
                        "children": [{
                            "rank": 2,
                            "title": "22 \u6211\u4eec\u5947\u5999\u7684\u4e16\u754c",
                            "id": "22 \u6211\u4eec\u5947\u5999\u7684\u4e16\u754c:90",
                            "children": [],
                            "start": "90",
                            "end": "92"
                        }, {
                            "rank": 2,
                            "title": "23 \u6d77\u5e95\u4e16\u754c",
                            "id": "23 \u6d77\u5e95\u4e16\u754c:93",
                            "children": [],
                            "start": "93",
                            "end": "94"
                        }, {
                            "rank": 2,
                            "title": "24 \u706b\u70e7\u4e91",
                            "id": "24 \u706b\u70e7\u4e91:95",
                            "children": [],
                            "start": "95",
                            "end": "96"
                        }, {
                            "rank": 2,
                            "title": "\u53e3\u8bed\u4ea4\u9645\uff1a\u529d\u544a",
                            "id": "\u53e3\u8bed\u4ea4\u9645\uff1a\u529d\u544a:97",
                            "children": [],
                            "start": "97",
                            "end": "97"
                        }, {
                            "rank": 2,
                            "title": "\u4e60\u4f5c\uff1a\u56fd\u5b9d\u5927\u718a\u732b",
                            "id": "\u4e60\u4f5c\uff1a\u56fd\u5b9d\u5927\u718a\u732b:98",
                            "children": [],
                            "start": "98",
                            "end": "98"
                        }, {
                            "rank": 2,
                            "title": "\u8bed\u6587\u56ed\u5730",
                            "id": "\u8bed\u6587\u56ed\u5730:99",
                            "children": [],
                            "start": "99",
                            "end": "100"
                        }],
                        "start": "89",
                        "end": "89"
                    }, {
                        "rank": 1,
                        "title": "\u7b2c\u516b\u5355\u5143",
                        "id": "\u7b2c\u516b\u5355\u5143:101",
                        "children": [{
                            "rank": 2,
                            "title": "25 \u6162\u6027\u5b50\u88c1\u7f1d\u548c\u6025\u6027\u5b50\u987e\u5ba2",
                            "id": "25 \u6162\u6027\u5b50\u88c1\u7f1d\u548c\u6025\u6027\u5b50\u987e\u5ba2:102",
                            "children": [],
                            "start": "102",
                            "end": "105"
                        }, {
                            "rank": 2,
                            "title": "26* \u65b9\u5e3d\u5b50\u5e97",
                            "id": "26* \u65b9\u5e3d\u5b50\u5e97:106",
                            "children": [],
                            "start": "106",
                            "end": "108"
                        }, {
                            "rank": 2,
                            "title": "27 \u6f0f",
                            "id": "27 \u6f0f:109",
                            "children": [],
                            "start": "109",
                            "end": "112"
                        }, {
                            "rank": 2,
                            "title": "28* \u67a3\u6838",
                            "id": "28* \u67a3\u6838:113",
                            "children": [],
                            "start": "113",
                            "end": "115"
                        }, {
                            "rank": 2,
                            "title": "\u53e3\u8bed\u4ea4\u9645\uff1a\u8da3\u5473\u6545\u4e8b\u4f1a",
                            "id": "\u53e3\u8bed\u4ea4\u9645\uff1a\u8da3\u5473\u6545\u4e8b\u4f1a:116",
                            "children": [],
                            "start": "116",
                            "end": "116"
                        }, {
                            "rank": 2,
                            "title": "\u4e60\u4f5c\uff1a\u8fd9\u6837\u60f3\u8c61\u771f\u6709\u8da3",
                            "id": "\u4e60\u4f5c\uff1a\u8fd9\u6837\u60f3\u8c61\u771f\u6709\u8da3:117",
                            "children": [],
                            "start": "117",
                            "end": "117"
                        }, {
                            "rank": 2,
                            "title": "\u8bed\u6587\u56ed\u5730",
                            "id": "\u8bed\u6587\u56ed\u5730:118",
                            "children": [],
                            "start": "118",
                            "end": "119"
                        }],
                        "start": "101",
                        "end": "101"
                    }, {
                        "rank": 1,
                        "title": "\u8bc6\u5b57\u8868",
                        "id": "\u8bc6\u5b57\u8868:120",
                        "children": [],
                        "start": "120",
                        "end": "122"
                    }, {
                        "rank": 1,
                        "title": "\u5199\u5b57\u8868",
                        "id": "\u5199\u5b57\u8868:123",
                        "children": [],
                        "start": "123",
                        "end": "124"
                    }, {
                        "rank": 1,
                        "title": "\u8bcd\u8bed\u8868",
                        "id": "\u8bcd\u8bed\u8868:125",
                        "children": [],
                        "start": "125",
                        "end": "128"
                    }, {
                        "rank": 1,
                        "title": "\u5c01\u5e95",
                        "id": "\u5c01\u5e95:129",
                        "children": [],
                        "start": "129",
                        "end": "129"
                    }],
                    "start": null,
                    "end": null
                },
                {
                    "rank": 0,
                    "title": "\u5317\u5e08\u5927\u7248\u4e09\u5e74\u7ea7\u6570\u5b66\u4e0b\u518c",
                    "id": "\u5317\u5e08\u5927\u7248\u4e09\u5e74\u7ea7\u6570\u5b66\u4e0b\u518c:None",
                    "children": [{
                        "rank": 1,
                        "title": "\u4e00 \u9664\u6cd5",
                        "id": "\u4e00 \u9664\u6cd5:2",
                        "children": [{
                            "rank": 2,
                            "title": "\u5206\u6843\u5b50",
                            "id": "\u5206\u6843\u5b50:2",
                            "children": [],
                            "start": "2",
                            "end": "3"
                        }, {
                            "rank": 2,
                            "title": "\u5206\u6a58\u5b50",
                            "id": "\u5206\u6a58\u5b50:4",
                            "children": [],
                            "start": "4",
                            "end": "5"
                        }, {
                            "rank": 2,
                            "title": "\u5546\u662f\u51e0\u4f4d\u6570",
                            "id": "\u5546\u662f\u51e0\u4f4d\u6570:6",
                            "children": [],
                            "start": "6",
                            "end": "7"
                        }, {
                            "rank": 2,
                            "title": "\u7334\u5b50\u7684\u70e6\u607c",
                            "id": "\u7334\u5b50\u7684\u70e6\u607c:8",
                            "children": [],
                            "start": "8",
                            "end": "9"
                        }, {
                            "rank": 2,
                            "title": "\u8282\u7ea6",
                            "id": "\u8282\u7ea6:10",
                            "children": [],
                            "start": "10",
                            "end": "12"
                        }, {
                            "rank": 2,
                            "title": "\u7ec3\u4e60\u4e00",
                            "id": "\u7ec3\u4e60\u4e00:13",
                            "children": [],
                            "start": "13",
                            "end": "14"
                        }, {
                            "rank": 2,
                            "title": "\u96c6\u90ae",
                            "id": "\u96c6\u90ae:15",
                            "children": [],
                            "start": "15",
                            "end": "16"
                        }, {
                            "rank": 2,
                            "title": "\u4e70\u65b0\u4e66",
                            "id": "\u4e70\u65b0\u4e66:17",
                            "children": [],
                            "start": "17",
                            "end": "18"
                        }, {
                            "rank": 2,
                            "title": "\u8bb2\u6545\u4e8b",
                            "id": "\u8bb2\u6545\u4e8b:19",
                            "children": [],
                            "start": "19",
                            "end": "20"
                        }, {
                            "rank": 2,
                            "title": "\u7ec3\u4e60\u4e8c",
                            "id": "\u7ec3\u4e60\u4e8c:21",
                            "children": [],
                            "start": "21",
                            "end": "22"
                        }],
                        "start": "2",
                        "end": "2"
                    }, {
                        "rank": 1,
                        "title": "\u4e8c \u56fe\u5f62\u7684\u8fd0\u52a8",
                        "id": "\u4e8c \u56fe\u5f62\u7684\u8fd0\u52a8:23",
                        "children": [{
                            "rank": 2,
                            "title": "\u8f74\u5bf9\u79f0\uff08\u4e00\uff09",
                            "id": "\u8f74\u5bf9\u79f0\uff08\u4e00\uff09:23",
                            "children": [],
                            "start": "23",
                            "end": "24"
                        }, {
                            "rank": 2,
                            "title": "\u8f74\u5bf9\u79f0\uff08\u4e8c\uff09",
                            "id": "\u8f74\u5bf9\u79f0\uff08\u4e8c\uff09:25",
                            "children": [],
                            "start": "25",
                            "end": "26"
                        }, {
                            "rank": 2,
                            "title": "\u5e73\u79fb\u548c\u65cb\u8f6c",
                            "id": "\u5e73\u79fb\u548c\u65cb\u8f6c:27",
                            "children": [],
                            "start": "27",
                            "end": "29"
                        }],
                        "start": "23",
                        "end": "23"
                    }, {
                        "rank": 1,
                        "title": "\u4e09 \u4e58\u6cd5",
                        "id": "\u4e09 \u4e58\u6cd5:30",
                        "children": [{
                            "rank": 2,
                            "title": "\u627e\u89c4\u5f8b",
                            "id": "\u627e\u89c4\u5f8b:30",
                            "children": [],
                            "start": "30",
                            "end": "31"
                        }, {
                            "rank": 2,
                            "title": "\u961f\u5217\u8868\u6f14\uff08\u4e00\uff09",
                            "id": "\u961f\u5217\u8868\u6f14\uff08\u4e00\uff09:32",
                            "children": [],
                            "start": "32",
                            "end": "33"
                        }, {
                            "rank": 2,
                            "title": "\u961f\u5217\u8868\u6f14\uff08\u4e8c\uff09",
                            "id": "\u961f\u5217\u8868\u6f14\uff08\u4e8c\uff09:34",
                            "children": [],
                            "start": "34",
                            "end": "35"
                        }, {
                            "rank": 2,
                            "title": "\u7535\u5f71\u9662",
                            "id": "\u7535\u5f71\u9662:36",
                            "children": [],
                            "start": "36",
                            "end": "37"
                        }, {
                            "rank": 2,
                            "title": "\u7ec3\u4e60\u4e09",
                            "id": "\u7ec3\u4e60\u4e09:38",
                            "children": [],
                            "start": "38",
                            "end": "39"
                        }, {
                            "rank": 2,
                            "title": "\u6574\u7406\u4e0e\u590d\u4e60",
                            "id": "\u6574\u7406\u4e0e\u590d\u4e60:40",
                            "children": [],
                            "start": "40",
                            "end": "40"
                        }, {
                            "rank": 2,
                            "title": "\u6211\u7684\u6210\u957f\u8db3\u8ff9",
                            "id": "\u6211\u7684\u6210\u957f\u8db3\u8ff9:41",
                            "children": [],
                            "start": "41",
                            "end": "41"
                        }, {
                            "rank": 2,
                            "title": "\u5de9\u56fa\u5e94\u7528",
                            "id": "\u5de9\u56fa\u5e94\u7528:42",
                            "children": [],
                            "start": "42",
                            "end": "44"
                        }],
                        "start": "30",
                        "end": "30"
                    }, {
                        "rank": 1,
                        "title": "\u56db \u5343\u514b\u3001\u514b\u3001\u5428",
                        "id": "\u56db \u5343\u514b\u3001\u514b\u3001\u5428:45",
                        "children": [{
                            "rank": 2,
                            "title": "\u6709\u591a\u91cd",
                            "id": "\u6709\u591a\u91cd:45",
                            "children": [],
                            "start": "45",
                            "end": "46"
                        }, {
                            "rank": 2,
                            "title": "1\u5428\u6709\u591a\u91cd",
                            "id": "1\u5428\u6709\u591a\u91cd:47",
                            "children": [],
                            "start": "47",
                            "end": "48"
                        }],
                        "start": "45",
                        "end": "45"
                    }, {
                        "rank": 1,
                        "title": "\u4e94 \u9762\u79ef",
                        "id": "\u4e94 \u9762\u79ef:49",
                        "children": [{
                            "rank": 2,
                            "title": "\u4ec0\u4e48\u662f\u9762\u79ef",
                            "id": "\u4ec0\u4e48\u662f\u9762\u79ef:49",
                            "children": [],
                            "start": "49",
                            "end": "50"
                        }, {
                            "rank": 2,
                            "title": "\u9762\u79ef\u5355\u4f4d",
                            "id": "\u9762\u79ef\u5355\u4f4d:51",
                            "children": [],
                            "start": "51",
                            "end": "52"
                        }, {
                            "rank": 2,
                            "title": "\u957f\u65b9\u5f62\u7684\u9762\u79ef",
                            "id": "\u957f\u65b9\u5f62\u7684\u9762\u79ef:53",
                            "children": [],
                            "start": "53",
                            "end": "55"
                        }, {
                            "rank": 2,
                            "title": "\u9762\u79ef\u5355\u4f4d\u7684\u6362\u7b97",
                            "id": "\u9762\u79ef\u5355\u4f4d\u7684\u6362\u7b97:56",
                            "children": [],
                            "start": "56",
                            "end": "57"
                        }, {
                            "rank": 2,
                            "title": "\u7ec3\u4e60\u56db",
                            "id": "\u7ec3\u4e60\u56db:58",
                            "children": [],
                            "start": "58",
                            "end": "60"
                        }],
                        "start": "49",
                        "end": "49"
                    }, {
                        "rank": 1,
                        "title": "\u6570\u5b66\u597d\u73a9",
                        "id": "\u6570\u5b66\u597d\u73a9:61",
                        "children": [{
                            "rank": 2,
                            "title": "\u5c0f\u5c0f\u8bbe\u8ba1\u5e08",
                            "id": "\u5c0f\u5c0f\u8bbe\u8ba1\u5e08:61",
                            "children": [],
                            "start": "61",
                            "end": "62"
                        }, {
                            "rank": 2,
                            "title": "\u6211\u4eec\u4e00\u8d77\u53bb\u6e38\u56ed",
                            "id": "\u6211\u4eec\u4e00\u8d77\u53bb\u6e38\u56ed:63",
                            "children": [],
                            "start": "63",
                            "end": "64"
                        }, {
                            "rank": 2,
                            "title": "\u6709\u8da3\u7684\u63a8\u7406",
                            "id": "\u6709\u8da3\u7684\u63a8\u7406:65",
                            "children": [],
                            "start": "65",
                            "end": "66"
                        }],
                        "start": "61",
                        "end": "61"
                    }, {
                        "rank": 1,
                        "title": "\u516d \u8ba4\u8bc6\u5206\u6570",
                        "id": "\u516d \u8ba4\u8bc6\u5206\u6570:67",
                        "children": [{
                            "rank": 2,
                            "title": "\u5206\u4e00\u5206\uff08\u4e00\uff09",
                            "id": "\u5206\u4e00\u5206\uff08\u4e00\uff09:67",
                            "children": [],
                            "start": "67",
                            "end": "69"
                        }, {
                            "rank": 2,
                            "title": "\u5206\u4e00\u5206\uff08\u4e8c\uff09",
                            "id": "\u5206\u4e00\u5206\uff08\u4e8c\uff09:70",
                            "children": [],
                            "start": "70",
                            "end": "72"
                        }, {
                            "rank": 2,
                            "title": "\u6bd4\u5927\u5c0f",
                            "id": "\u6bd4\u5927\u5c0f:73",
                            "children": [],
                            "start": "73",
                            "end": "74"
                        }, {
                            "rank": 2,
                            "title": "\u5403\u897f\u74dc",
                            "id": "\u5403\u897f\u74dc:75",
                            "children": [],
                            "start": "75",
                            "end": "76"
                        }, {
                            "rank": 2,
                            "title": "\u7ec3\u4e60\u4e94",
                            "id": "\u7ec3\u4e60\u4e94:77",
                            "children": [],
                            "start": "77",
                            "end": "79"
                        }],
                        "start": "67",
                        "end": "67"
                    }, {
                        "rank": 1,
                        "title": "\u4e03 \u6570\u636e\u7684\u6574\u7406\u548c\u8868\u793a",
                        "id": "\u4e03 \u6570\u636e\u7684\u6574\u7406\u548c\u8868\u793a:80",
                        "children": [{
                            "rank": 2,
                            "title": "\u5c0f\u5c0f\u978b\u5e97",
                            "id": "\u5c0f\u5c0f\u978b\u5e97:80",
                            "children": [],
                            "start": "80",
                            "end": "81"
                        }, {
                            "rank": 2,
                            "title": "\u5feb\u4e50\u6210\u957f",
                            "id": "\u5feb\u4e50\u6210\u957f:82",
                            "children": [],
                            "start": "82",
                            "end": "83"
                        }],
                        "start": "80",
                        "end": "80"
                    }, {
                        "rank": 1,
                        "title": "\u603b\u590d\u4e60",
                        "id": "\u603b\u590d\u4e60:84",
                        "children": [{
                            "rank": 2,
                            "title": "\u6570\u7684\u8ba4\u8bc6",
                            "id": "\u6570\u7684\u8ba4\u8bc6:84",
                            "children": [],
                            "start": "84",
                            "end": "85"
                        }, {
                            "rank": 2,
                            "title": "\u6570\u7684\u8fd0\u7b97",
                            "id": "\u6570\u7684\u8fd0\u7b97:86",
                            "children": [],
                            "start": "86",
                            "end": "89"
                        }, {
                            "rank": 2,
                            "title": "\u5e38\u89c1\u7684\u91cf",
                            "id": "\u5e38\u89c1\u7684\u91cf:90",
                            "children": [],
                            "start": "90",
                            "end": "91"
                        }, {
                            "rank": 2,
                            "title": "\u56fe\u5f62\u7684\u8ba4\u8bc6",
                            "id": "\u56fe\u5f62\u7684\u8ba4\u8bc6:92",
                            "children": [],
                            "start": "92",
                            "end": "93"
                        }, {
                            "rank": 2,
                            "title": "\u56fe\u5f62\u4e0e\u6d4b\u91cf",
                            "id": "\u56fe\u5f62\u4e0e\u6d4b\u91cf:94",
                            "children": [],
                            "start": "94",
                            "end": "96"
                        }, {
                            "rank": 2,
                            "title": "\u56fe\u5f62\u7684\u8fd0\u52a8",
                            "id": "\u56fe\u5f62\u7684\u8fd0\u52a8:97",
                            "children": [],
                            "start": "97",
                            "end": "98"
                        }, {
                            "rank": 2,
                            "title": "\u56fe\u5f62\u4e0e\u4f4d\u7f6e",
                            "id": "\u56fe\u5f62\u4e0e\u4f4d\u7f6e:98",
                            "children": [],
                            "start": "98",
                            "end": "99"
                        }, {
                            "rank": 2,
                            "title": "\u7edf\u8ba1",
                            "id": "\u7edf\u8ba1:99",
                            "children": [],
                            "start": "99",
                            "end": "100"
                        }],
                        "start": "84",
                        "end": "84"
                    }],
                    "start": null,
                    "end": null
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'title'
            },
            expandKeys: [],
            currentNodeKey: '',
        };
    },
    watch: {
        '$route': {
            handler(to, from) {
                if (to.query.tree && to.query.tree.includes('--')) {
                    let expandKeys = to.query.tree.split('--');
                    this.expandKeys = expandKeys;
                    this.currentNodeKey = expandKeys[expandKeys.length - 1];
                }
            },
            immediate: true,
        }
    },
    mounted() {
        let tree = this.$refs.tree;
        let currentNode = tree.getCurrentNode();
        if (currentNode) {
            this.onNodeChange(tree.getNode(currentNode));
        }
    },
    methods: {
        handleNodeClick(_, node) {
            this.onNodeChange(node)
        },
        onNodeChange(node) {
            const data = node.data;
            let titles = [];
            let item = node;
            let currentRange = range(Number(item.data.start), Number(item.data.end));
            let catId;
            do {
                if (item.data.id) {
                    titles.push(item.data.id);
                    if (item.data.rank === 0) {
                        catId = item.data.id;
                    }
                    if (item.data.rank === 2) {
                        const pages = Number(item.data.end) - Number(item.data.start) + 1;
                        let currentRange = range(Number(item.data.start), Number(item.data.end));
                    }
                }
            } while (item = item.parent);
            this.$store.commit(Mutation.setRange, currentRange);
            this.$router.push({
                name: 'book-content',
                params: {id: catId},
                query: {tree: titles.reverse().join('--')}
            });
            if (data.start === null) {
                return;
            }
            this.$store.commit(Mutation.setBook, catId);
            this.$store.commit(Mutation.setSrc, data.start);

            if (data.start !== data.end) {
                this.$store.commit(Mutation.setRightSrc, Number(data.start) + 1);
                return;

            } else {
                if (data.rank === 3 && node.nextSibling && node.nextSibling.data.rank === data.rank) {
                    this.$store.commit(Mutation.setRightSrc, Number(data.start) + 1);
                    return;
                }
            }

            this.$store.commit(Mutation.setRightSrc, '');
        }
    }
};
const Ctor = Vue.extend(Main);
new Ctor().$mount('#app');
